<template>
  <!-- <div>你好：{{greetting}}</div> -->
  <div class="loginForm">
    <el-form
      ref="loginForm"
      :model="form"
      :rules="rules"
      label-width="80px"
      @keydown.enter.native="handleLogin"
    >
      <el-form-item label="用户名：" prop="user" class="text">
        <el-input v-model="form.user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password" class="text">
        <ElInput type="password" v-model="form.password" placeholder="请输入密码"></ElInput>
      </el-form-item>
      <el-button type="primary" @click="handleLogin">登录</el-button>
      <el-button type="button">注册</el-button>
    </el-form>
  </div>
</template>

<script> 
import {login,test} from '@/api/login'
// import {mapActions} from 'vuex'

export default {
  name: "Login",
  // components: { Form },
  props: {
    usernameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: "账号密码不能为空", trigger: "blur" }
        ];
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: "密码不能为空", trigger: "blur" }];
      }
    }
  },
  data() {
    return {
      greetting: "Hello",
      form: {
        user: "admin",
        password: ""
      }
    };
  },
  computed: {
    rules() {
      return {
        user: this.usernameRules,
        password: this.passwordRules
      };
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        //var auto = this.form.auto; 
        let username = this.form.user;
        let password = this.form.password;
        if (valid) {
          login({username,password}).then(res=>{
            console.log(res);
          })
          // test({}).then(res=>{
          //  console.log(res);
          // })
          console.log("我执行了登录");
        }
      });
    }
  }
};
</script>

<style>
.text {
  width: 500px;
  padding-left: 27%;
}
</style>